<template>
  <el-dialog
    v-loading="isLoading"
    class="dialog"
    :title="'资源添加'"
    :visible.sync="dialogVisible"
    width="800px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="handleClose"
  >
    <el-form
      ref="form"
      :model="form"
      label-width="100px"
      label-position="right"
    >

      <div class="common">

        <el-form-item label-position="left" label="资源:">

          <el-upload
            class="upload-demo"
            drag
            v-loading="loading"
            :on-success="picUpload"
            :before-upload="beforeUpload"
            :action='$env.BASE_URL+"/homework/zhty/public/import_file"'
            name="file"
            :headers="{
              'access-token': $store.state.user.TOKEN,
            }"
            multiple
          >
            <div v-if="!form.src">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
            </div>
            <img
              style="
                width: auto;
                height: auto;
                max-height: 100%;
                max-width: 100%;
              "
              v-if="form.src"
              :src="$store.state.user.BASE_URL + form.src"
              alt=""
            />
            <div class="el-upload__tip" slot="tip">
              建议上传16：9的图片｜视频资源
            </div>
          </el-upload>
        </el-form-item>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose()">取 消</el-button>
      <el-button
        size="small"
        :loading="buttonLoading"
        type="primary"
        @click="submit()"
      >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>

import {teacherSourceIncrement,delTeacherSource} from "@/api/teacherSource";
import {deleteClass} from "@/api/school/class";
export default {
  data() {

    return {

      isLoading: false,
      loading: false,
      buttonLoading: false,
      form: {
        src:"",
        type:"0",
        fileName:""
      },
    };
  },

  props: {
    dialogVisible: {
      type: Boolean,
    },
  },

  methods: {
    submit(){
      teacherSourceIncrement({src:this.form.src,teacherId:this.$store.state.user.USER_INFO.id,type:this.form.type,fileName:this.form.fileName}).then(response=>{
        if(response.code == 200){
          this.$message.success("添加成功");
          this.handleClose()
        }
      })
    },

    beforeUpload(file) {
      this.loading = true;
      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
      const types = ["jpeg", "jpg", "png","mp4","avi","mpg"];
      const videoTypes = ["mp4","avi","mpg"]
      if (!types.includes(fileSuffix)) {
        this.$message.error(`文件只能是 ${types.join()} 格式!`);
        this.loading = false;
      }
      if(videoTypes.includes(fileSuffix)){
        this.form.type = "1";
      }
      return types.includes(fileSuffix);
    },
    validator() {
      this.$refs.form.validate(() => {});
    },
    handleClose(done) {
      this.$emit("close", done);
    },
    picUpload(e) {
      if (e.code === 200) {
        this.form.src = e.result.pic;
      } else if (e.code === 401) {
        this.$router.replace("/");
        this.$message.error("您的身份信息已过期，请重新登录");
        sessionStorage.removeItem("userInfo");
        sessionStorage.removeItem("token");
        this.$store.commit("user/SET_TOKEN", "");
      } else {
        this.$message.error(e.message);
      }
      this.loading = false;
      this.validator();
    },
  },
};
</script>
<style lang="scss" scoped>
.common {
  display: flex;
  justify-content: space-between;
  width: 100%;
  .el-form-item {
    flex: 1;
  }
}
::v-deep .el-dialog {
  margin-top: 8vh !important;
}
.el-icon-circle-plus-outline {
  margin-left: 20px;
  &::before {
    font-size: 24px;
    color: #409eff;
  }
}
.el-icon-delete {
  margin-left: 20px;
  &::before {
    font-size: 24px;
    color: #f56c6c;
  }
}
::v-deep .el-upload-list__item {
  display: none;
}
::v-deep .el-upload--text {
  width: 100%;
}
::v-deep .el-upload-dragger {
  width: 70%;
}
::v-deep .el-form {
  padding-left: 60px;
}
</style>
